<template>
  <div class="container flex">
    <div class="collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          :title="item.title"
          :name="index + 1"
          v-for="(item, index) in collapseList"
          :key="index"
        >
          <div
            v-for="(ele, i) in item.collaps_item"
            :key="i"
            class="collapsItem cursor_pointer"
            @click="tabCollaps(index, i)"
            :class="{ activeCollapsItem: collapsIndex === index && collapsItemIndex === i }"
          >
            {{ ele }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="content">
      <div v-if="collapsIndex == 0 && collapsItemIndex == 0">
        <div class="title">变更车道</div>
        <p class="marT40 f35">【安全变更车道】</p>
        <div class="marT40 defaultColor">
          <span class="f35"> 1、变更车道前:</span
          ><span class="fh35 marL20">仔细观察</span>目标车道车流情况，<span class="fh35 marL10"
            >判断是否具备</span
          >安全变道条件。
        </div>
        <p class="marT40 f35">2、提前开启转向灯:</p>
        <div class="flex flex-align-baseline defaultColor marT40">
          <div class="circle">1</div>
          <div class="fh35">向左</div>
          <div>变道</div>
          ，提前开启
          <div class="fh35">左转向灯</div>
          ;
        </div>
        <div class="flex flex-align-baseline defaultColor marT40">
          <div class="circle">2</div>
          <div class="fh35">向右</div>
          <div>变道</div>
          ，提前开启
          <div class="fh35">右转向灯</div>
          。
        </div>
        <div class="marT40 defaultColor">
          <span class="f35">3、观察交通情况:</span>
          通过后视镜和侧视镜 <span class="fh35">确认</span> 后方和侧方安全后，<span class="fh35"
            >平稳变道。</span
          >
        </div>
        <div class="marT40 defaultColor">
          <span class="f35 marR20">4、交叉路口前变道:</span>
          按<span class="fh35">导向箭头</span>指示, 在<span class="fh35">虚线区</span>
          完成变道，进入<span class="fh35">实线区后禁止</span> 变道。
        </div>
        <div class="marT40 defaultColor">
          <span class="f35 marR20">5、变更车道完毕:</span>
          <span class="fh35">关闭</span>转向灯，确保操作完成。
        </div>
        <p class="marT40 f35">【注意事项】</p>
        <div class="marT30 defaultColor line_height">
          <span class="f35 marR20">1、</span>不影响<span class="fh35">其他车辆</span>
          正常行驶。<span class="f35 marR20">2、</span> 避免<span class="fh35">频繁</span
          >变道。<span class="f35 marR20"> 3、</span> 禁止<span class="fh35">连续</span>变道。<span
            class="f35 marR20"
            >4、</span
          >左右两侧车辆向同一车道变更时，左侧车辆<span class="fh35">让右侧车辆先行</span>变更。<span
            class="f35 marR20"
            >5、</span
          >在车道分界线为<span class="fh35">虚实线</span>的路段，<span class="fh35">实线一侧</span
          >的车辆<span class="fh35">严禁变道</span>。<span class="f35 marR20">6、</span
          ><span class="fh35">避免长时间</span>骑轧分界线。
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { CollapseModelValue } from 'element-plus'
import './dialog.scss'
const collapseList = reactive([
  {
    title: '操作规范题',
    collaps_item: [
      '变更车道',
      '安全超车、让超车',
      '灯光、喇叭规定',
      '安全停车和开车门',
      '安全掉头',
      '安全会车',
      '驾驶人安全行为',
      '故障处理',
      '安全倒车',
      '牵引故障机动车',
      '安全跟车',
      '起步、汇入车流',
      '上车、下车',
      '安全驾驶状态',
    ],
  },
  {
    title: '高速公路题',
    collaps_item: [
      '变更车道',
      '安全超车、让超车',
      '灯光、喇叭规定',
      '安全停车和开车门',
      '安全掉头',
      '安全会车',
      '驾驶人安全行为',
      '故障处理',
      '安全倒车',
      '牵引故障机动车',
      '安全跟车',
      '起步、汇入车流',
      '上车、下车',
      '安全驾驶状态',
    ],
  },
  {
    title: '行车路况题',
    collaps_item: [
      '变更车道',
      '安全超车、让超车',
      '灯光、喇叭规定',
      '安全停车和开车门',
      '安全掉头',
      '安全会车',
      '驾驶人安全行为',
      '故障处理',
      '安全倒车',
      '牵引故障机动车',
      '安全跟车',
      '起步、汇入车流',
      '上车、下车',
      '安全驾驶状态',
    ],
  },
  {
    title: '驾驶证相关题',
    collaps_item: [
      '变更车道',
      '安全超车、让超车',
      '灯光、喇叭规定',
      '安全停车和开车门',
      '安全掉头',
      '安全会车',
      '驾驶人安全行为',
      '故障处理',
      '安全倒车',
      '牵引故障机动车',
      '安全跟车',
      '起步、汇入车流',
      '上车、下车',
      '安全驾驶状态',
    ],
  },
])
const collapsIndex = ref(0)
const collapsItemIndex = ref(0)
const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val, 'val===')
}
const tabCollaps = (index: number, i: number) => {
  console.log(index, 'index')
  console.log(i, 'i')
  collapsIndex.value = index
  collapsItemIndex.value = i
}
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 92px);
}
.collapse {
  overflow: auto;
  height: 100%;
  width: 20%;
  // padding: 0 20px 0 60px;
}
.collapsItem {
  font-size: 25px;
  color: #4a4a4a;
  padding: 0 60px;
  height: 80px;
  line-height: 80px;
  &:hover {
    background-color: #eaf9ee;
  }
}
.activeCollapsItem {
  background-color: #eaf9ee;
}
.content {
  width: 80%;
  padding: 60px 300px;
}
.el-icon {
  font-size: 20px;
  color: #999999;
}
.title {
  text-align: center;
  font-size: 60px;
  color: #333;
}
.f35 {
  font-size: 35px;
  color: #333;
  font-weight: bold;
}
.fh35 {
  font-size: 35px;
  color: #ff3737;
  font-weight: 400;
}
.defaultColor {
  font-size: 35px;
  color: #4a4a4a;
}
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 500;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line_height {
  line-height: 55px;
}
</style>
